<HTML>
<HEAD>
<TITLE></TITLE>
	<link rel="stylesheet" type="text/css" href="../css/word_bubble.css" />
	<link rel="stylesheet" type="text/css" href="css/sprite.css" />
	<link rel="stylesheet" type="text/css" href="css/debug.css"/>
</HEAD>

<BODY>

<script type="text/javascript" src="../js/Util.js"></script>
<script type="text/javascript" src="../js/Point2d.js"></script>
<script type="text/javascript" src="../js/SpriteDirection.js"></script>
<script type="text/javascript" src="../js/Sprite.js"></script>
<script type="text/javascript" src="../js/HitTest.js"></script>

<!-- for interaction -->
<script type="text/javascript" src="../js/MouseUtil.js"></script>
<script type="text/javascript" src="../js/Timer.js"></script>
<script type="text/javascript" src="../js/TimedUtil.js"></script>

<!-- for this demo -->
<script type="text/javascript" src="js/sprite.js"></script>
<!--
<ul id="doggeral">
	<li>Here are some cheery little fellows!</li>
	<li>They only wants to be close to you ;</li>
	<li>Click and show them the way, but</li>
	<li>handle them with care.</li>
</ul>
-->
<div id="doggeral">
Check out this bit of easy-peasy:
<pre>
var sprite = SpriteFactory.fromBean(
	{
		  id:'sprite_0'
		, image:'../images/sprites/sprite_skl1.png'
		, directions: [
			  ( { name:'up'    , delta:{x:0,y:-4} , frames:[{x:0,y: 0},{x:32,y: 0}] } )
			, ( { name:'down'  , delta:{x:0,y:+4} , frames:[{x:0,y:32},{x:32,y:32}] } )
			, ( { name:'left'  , delta:{x:-4,y:0} , frames:[{x:0,y:64},{x:32,y:64}] } )
			, ( { name:'right' , delta:{x:+4,y:0} , frames:[{x:0,y:96},{x:32,y:96}] } )
		]
	}
);
</pre>
Of course there is some more to it to make them follow the mouse, etc, but still...
</div>

<div id="ouch" class="word_bubble" style="display:none">
	<div id="ouch_text" class="word_bubble_text" style="width:200px"> Ouch! That hurt me!</div>
	<div class="word_bubble_handle">
		<div class="word_bubble_handle1"></div>
		<div class="word_bubble_handle2"></div>
	<div>
</div>

</BODY>
</HTML>
